{% extends "base.html" %}
{% load static %}

{% block content %}

<link type="text/css" href="{% static "test_app/css/style.css" %}" rel="stylesheet">
<link type="text/css" href="{% static "test_app/css/slider.css" %}" rel="stylesheet">
<link type="text/css" href="{% static "test_app/css/double_slider.css" %}" rel="stylesheet">
<link type="text/css" href="{% static "test_app/css/processingScreen.css" %}" rel="stylesheet">

{# Add interactive plotly graphs #}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

{# Add program scripts #}
<div>
    <script type="text/javascript" src="{% static "test_app/js/AmpObjectContainer.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/process_scans.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/registration.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/tabs.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/drop_down.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/align.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/object_table.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/home.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/scalar_bar.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/graphs.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/objectAnalyser.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/picking.js" %}"></script>
    <script type="text/javascript" src="{% static "test_app/js/dynamicTable.js" %}"></script>
    <script type="module">import newLookupTable from "{% static "test_app/js/lut.js" %}"; window.vtkNewLookupTable = newLookupTable;</script>
</div>


{#<script type="text/javascript" src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>#}
{#<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>#}

<div id="loadingScreen">
    <img src="{% static "test_app/res/AmpScanHeader.svg" %}" alt="Logo" id="loadingLogo">
</div>

<div id="processingScreen">
    Processing...
</div>

<div style="z-index: 2; position: absolute; left:5px; top:5px;">
    <img id="ampLogo" src="{% static "test_app/res/AmpScanLogo.svg" %}" alt="Logo" style="width:50px;height:50px;">
</div>


<div class="wrapper" id="wrapper">
    <div class="tab" id="tabContainer">
        <button class="tablinks" onclick="openTab(event.currentTarget, 'Home')" id="defaultTabOpen">Home</button>
        <button class="tablinks" onclick="openTab(event.currentTarget, 'Align')">Align</button>
        <button class="tablinks" onclick="openTab(event.currentTarget, 'Register')" id="registerTabButton">Register</button>
        <button class="tablinks" onclick="openTab(event.currentTarget, 'Analyse')" id="analyseTabButton">Analyse</button>
        <button class="tablinks" onclick="openTab(event.currentTarget, 'Settings')">Settings</button>
    </div>

    <div class="topRightPanel" id="control" style="overflow:auto;">
         <div id="Home" class="tabcontent">
             <div class="controlOptionLineContainer" id="resetCameraContainer">
                <button onclick="resetCamera();">Reset Camera</button>
             </div>
             <div style="height: 50px">
{#                 Gap for spacing #}
             </div>
             <div class="controlOptionLineContainer" style="height: 25px;">
                Object: <select class="targetDropdown" id="homeDropdown" onchange="updateDropdown()"></select>
             </div>
             <div class="controlOptionLineContainer">
                <button onclick="smoothObject();">Smooth</button>
             </div>
             <div class="controlOptionLineContainer">
                Height(mm): <input type="number" onchange="setTrimHeight(this.value)">
                <button onclick="trimObjectButtonPressed();">Trim</button>
             </div>
             <div class="controlOptionLineContainer">
                Display Slice Plane: <label class="switch">
                    <input type="checkbox" id="showSlicePlane" onclick="toggleSlicePlane()">
                    <span class="toggleSlider"></span>
                </label>
             </div>
             <div style="height: 50px">
{#                 Gap for spacing #}
             </div>
             <div class="controlOptionLineContainer">
                <button id="trimButton1" onclick="trimObjectSelectButtonPressed(1);">Point 1</button>
                <button id="trimButton2" onclick="trimObjectSelectButtonPressed(2);">Point 2</button>
                <button id="trimButton3" onclick="trimObjectSelectButtonPressed(3);">Point 3</button>
                <button id="doPointTrimButton" onclick="pointTrim();">Trim</button>
             </div>
        </div>

        <div id="Align" class="tabcontent">

            <div class="controlOptionLineContainer">
                Static: <select class="targetDropdown" id="alignStaticDropdown" onchange="updateDropdown()"></select>
                <input type="color" class="targetColour" id="alignStaticColour" value="#aa4b41">
                <input type="range" class="targetOpacity slider" id="alignStaticOpacity" value="75" min="0" max="100">
                <button style="position:absolute;left:335px" onclick="swapAlignTargets()">⮃</button>
            </div>
            <div class="controlOptionLineContainer">
                Moving: <select class="targetDropdown" id="alignMovingDropdown" onchange="updateDropdown()"></select>
                <input type="color" class="targetColour" id="alignMovingColour" value="#25305e">
                <input type="range" class="targetOpacity slider" id="alignMovingOpacity" value="75" min="0" max="100">
            </div>
            <div class="controlOptionLineContainer">
                <label for="adjustPrecision">Course/Fine adjust (5mm/0.5mm) and (5°/0.5°)</label>
                <label class="switch">
                    <input type="checkbox" id="adjustPrecision">
                    <span class="toggleSlider"></span>
                </label>
            </div>
            <div class="controlOptionLineContainer" id="transformationContainer">
                {# Where all the controls rotation and translation go #}
            </div>
            <div class="controlOptionLineContainer">
                <button onclick="runICP()" id="runICPButton">Run ICP</button>
                <button onclick="runCentre(true)" id="runCentreButton">Centre Global</button>
                <button onclick="runCentre(false)" id="runCentreRelativeButton">Centre Relative</button>
            </div>
            <div class="controlOptionLineContainer">
                <label for="sliceToggle">Slicing:</label>
                <label class="switch">
                    <input type="checkbox" id="sliceToggle" onclick="sliceToggle()">
                    <span class="toggleSlider"></span>
                </label>
                <div class="slideContainer">
                    <input type="range" class="slider" id="sliceDistanceSlider" min="-200" max="200" oninput="updateSlices()">
                </div>

            </div>
             <div class="controlOptionLineContainer" id="resetCameraContainer">
                <button onclick="resetCamera();">Reset Cameras</button>
             </div>
             <div class="controlOptionLineContainer">
                <button onclick="goToRegistration()" id="goToRegistrationButton">Go To Registration</button>
             </div>
        </div>

        <div id="Register" class="tabcontent">
            <div class="controlOptionLineContainer">
                Baseline: <select class="targetDropdown" id="registerBaselineDropdown" onchange="updateDropdown()"></select>
            </div>
            <div class="controlOptionLineContainer">
                Target: <select class="targetDropdown" id="registerTargetDropdown" onchange="updateDropdown()"></select>
            </div>
            <div class="controlOptionLineContainer">
                <label for="absErrorCheckbox">Absolute Error:</label>
                <label class="switch">
                    <input type="checkbox" id="absErrorCheckbox" onclick="changeAbsError()">
                    <span class="toggleSlider"></span>
                </label>
            </div>
            <div class="controlOptionLineContainer">
                <button onclick="runRegistration()" id="runRegistrationButton">Run Registration</button>
            </div>

            <div class="controlOptionLineContainer">{# Add spacing#}</div>

            <div id="registrationControls" style="display:none">
                <div class="controlOptionLineContainer">
                    <label for="noColours">Number of Colours:</label>
                    <input type="number" id="noColours" min="5" max="500" value="100" step="1" required
                           onchange="numberOfColoursChanged();" >
                </div>
{#                <div class="controlOptionLineContainer">#}
{#                    <label for="scalarMin">Min Deviation:</label>#}
{#                    <div class="slideContainer">#}
{#                        <input type="range" class="slider" id="scalarMin" min="-10" max="0" value="-8" step="1"#}
{#                               oninput="scalarsRangeChanged();" style="width:100px"><span id="scalarMinLabel">mm</span>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="controlOptionLineContainer">#}
{#                    <label for="scalarMax">Max Deviation:</label>#}
{#                    <div class="slideContainer">#}
{#                        <input type="range" class="slider" id="scalarMax" min="0" max="10" value="8" step="1"#}
{#                               oninput="scalarsRangeChanged();" style="width:100px"><span id="scalarMaxLabel">mm</span>#}
{#                    </div>#}
{#                </div>#}
                <div>
                    Scalar range:
                </div>
                <div class="controlOptionLineContainer" style="display:inline;top:-20px">
                    <input type="number" class="minScalarInputBox" onchange="setMinScalar(this.value)">
                    <input type="number" class="maxScalarInputBox" onchange="setMaxScalar(this.value)">
                    <section class="range-slider">
                        <span class="rangeValues" id="doubleSliderContainer"></span>
                        <input id="registerMinSlider" oninput="scalarsRangeChanged()" class="doubleSliderPart" value="-5" min="-10" max="10" step="1" type="range">
                        <input id="registerMaxSlider" oninput="scalarsRangeChanged()" class="doubleSliderPart" value="5" min="-10" max="10" step="1" type="range">
                    </section>
                </div>
                <div class="controlOptionLineContainer">
                    <label for="nameInput">Name:</label>
                    <input type="text" id="nameInput" oninput="checkNameValid();">
                </div>
                <div class="controlOptionLineContainer">
                    <button onclick="exportRegCSV('_regObject', 'download/regbins')" id="exportCSVButton">Export bins CSV</button>
                    <button onclick="exportRegCSV('_regObject', 'download/regcsv')" id="exportRegBinsCSVButton">Export values CSV</button>
                </div>
                <div class="controlOptionLineContainer">
                </div>
                <div class="controlOptionLineContainer">
                    <button onclick="exportRegObject()" id="finishRegistrationButton">Confirm Registration Object</button>
                    <span id="finishRegistrationText" style="color:red"></span>
                </div>
            </div>
        </div>

        <div id="Analyse" class="tabcontent">
{#            <div class="controlOptionLineContainer">#}
{#                <button onclick="startPickingAnalyse()" id="startPickingAnalyseButton">Pick Mid-Patella</button>#}
{#                <span id="pickingText"></span>#}
{#            </div>#}

            <div class="controlOptionLineContainer">
                <label for="noAnalyseBins">Number of bins:</label>
                <input type="number" id="noAnalyseBins" min="5" max="500" value="10" step="1" required
                       onchange="numberOfAnalyseBinChanged();" >
            </div>
            <div>Scalar range:</div>
            <div class="controlOptionLineContainer" style="display:inline;top:-20px">
                <input type="number" class="minScalarInputBox" onchange="setMinScalar(this.value)">
                <input type="number" class="maxScalarInputBox" onchange="setMaxScalar(this.value)">
                <section class="range-slider">
                    <!-- <span class="rangeValues" id="doubleSliderContainerAnalyse"></span> -->
                    <input id="analyseMinSlider" oninput="analyseScalarsRangeChanged()" class="doubleSliderPart" value="-5" min="-10" max="10" step="1" type="range">
                    <input id="analyseMaxSlider" oninput="analyseScalarsRangeChanged()" class="doubleSliderPart" value="5" min="-10" max="10" step="1" type="range">
                </section>
            </div>
            <div class="controlOptionLineContainer">
                <label for="sliceWidth">Slice width:</label>
                <input type="number" id="sliceWidth" min="5" max="100" value="10" step="1" required
                       onchange="sliceWidthChanged();" >
            </div>
            <div class="controlOptionLineContainer">
                <label for="3dAnalyseSettings">Slice view / 3D view:</label>
                <label class="switch">
                    <input type="checkbox" id="3dAnalyseSettings" onclick="changeAnalyse3DView()">
                    <span class="toggleSlider"></span>
                </label>
            </div>
            <div class="controlOptionLineContainer">
                Visualisation Target: <select id="visualisationTargetDropdown" onchange="changeAnalyseVisualisation()"></select>
            </div>
            <div class="controlOptionLineContainer">
                Graph:
                <select id="analyseGraphSelector" onchange="changeAnalyseGraphType()">
                    <option>CSA Graph</option>
                    <option>Perimeter Graph</option>
                    <option>Coronal Width Graph</option>
                    <option>Sagittal Width Graph</option>
                </select>
            </div>
        </div>

        <div id="Settings" class="tabcontent">
            <div class="controlOptionLineContainer">
                <label for="normsTickbox">Norms:</label>
                <label class="switch settingsOption">
                    <input type="checkbox" id="normsTickbox" onclick="normsChange()">
                    <span class="toggleSlider"></span>
                </label>
            </div>

            <div class="controlOptionLineContainer">
                <label for="edgesTickbox">Edge outlines:</label>
                <label class="switch settingsOption">
                    <input type="checkbox" id="edgesTickbox" onclick="updateEdges()">
                    <span class="toggleSlider"></span>
                </label>
            </div>

            <div class="controlOptionLineContainer">
                <label for="sliceThicknessSlider">Slice Thickness:</label>
                <input type="range" id="sliceThicknessSlider" value="3" min="1" max="50" class="settingsOption slider">
            </div>
        </div>
    </div>

    <div class="bottomRightPanel" id="obj-manager" style="overflow-x:auto;overflow-y:auto;">
        <table id="objTable">
            <tr>
                <th class="objectTableCell">Name</th>
                <th class="objectTableCell">Show</th>
                <th class="objectTableCell">Type</th>
                <th class="objectTableCell"> </th>
            </tr>
        </table>
    </div>

    <div class="bottomRightPanel" id="registrationGraphPanel" style="overflow-x:hidden;overflow-y:hidden;display:none">

    </div>
    <div class="bottomRightPanel" id="analyseGraphPanel" style="overflow-x:hidden;overflow-y:hidden;display:none">
        <div>
            <select id="analyseGraphSelector">
                <option>CSA Graph</option>
            </select>
        </div>
        <div id="csaGraphAnalyse">

        </div>
    </div>

    <div class="viewer" id="viewer">
        <div id="mainViewer"></div>

        <div class="alignViewContainer" id="topLeftViewer"></div>
        <div class="alignViewContainer" id="topRightViewer"></div>
        <div class="alignViewContainer" id="bottomLeftViewer"></div>
        <div class="alignViewContainer" id="bottomRightViewer"></div>

        <div class="analyseViewContainer" id="topLeftAnalyseViewer">
            <table id="AnalyseDataTable">
                <th class="analyseTableCell">Name</th>
                <th class="analyseTableCell">Volume /ml</th>
            </table>
        </div>
        <div class="analyseViewContainer" id="topRightAnalyseViewer"></div>
        <div class="analyseViewContainer" id="bottomLeftAnalyseViewer"></div>
        <div class="analyseViewContainer" id="bottomRightAnalyseViewer"></div>
    </div>

    <div id="scalarBarContainer">
        <div id="legend" class="legend">

        </div>

        <div id="keyLabel">

        </div>

        <div id="scaleContainer">

        </div>
    </div>
</div>


<script src="{% static "main.js" %}" type="text/javascript"></script>

<script type="text/javascript">
    setSessionID({{ session_id }});
</script>

{# When everything is ready, fade out loading screen #}
<script>document.getElementById("loadingScreen").style["animation-name"] = "loading";</script>
<script>document.getElementById("loadingLogo").style["animation-name"] = "loadingLogo";</script>

{% endblock content %}
